<template>
  <div class="top-card">
    <el-card class="top-card-n" shadow="hover" :style="{ background: props.backgroundColor }">
      <template #header>
        {{ props.title }}
      </template>
      <el-row class="top-card-n-content" style="text-align: center">
        <h1 style="font-size:30px;text-align: center;width:100%;">{{props.value}}</h1>
      </el-row>

      <el-row class="top-card-n-content" style="text-align: center">
        <h1 v-if="btn" style="font-size:10px;text-align: right;width:100%;">详情>></h1>
      </el-row>
    </el-card>
  </div>
</template>

<script setup name="topcard">
const props = defineProps({
  title: {
    type: String,
    default: () => '标题',
  },
  value:{
    type: String,
    default: () => '0',
  },
  backgroundColor: {
    type: String,
    default: () => 'linear-gradient(to right, #60b2fb, #6485f6)',
  },
  btn:{
    type: Boolean,
    default: true
  }
});


// 新增一个响应式属性，用于动态设置背景色
</script>

<style lang="scss" scoped>
.top-card {
  &-top-card-n {
    &-content {
      text-align: center;
    }
  }
  p {
    font-size: 20px;
    color: #fff;
  }
  :deep() {
    .el-card {
      &__header,
      &__body {
        color: var(--el-color-white) !important;
        font-weight: bold;
      }
    }
    .title {
      font-size: 20px;
      font-weight: bold;
    }
  }

  margin-bottom: 30px;
}
</style>
